<template>
    <!--begin::Aside-->
    <div id="kt_aside"
         class="aside aside-hoverable"
         :class="[asideTheme === 'light' && 'aside-light', asideTheme === 'dark' && 'aside-dark']"
         data-kt-drawer="true"
         data-kt-drawer-name="aside"
         data-kt-drawer-activate="{default: true, lg: false}"
         data-kt-drawer-overlay="true"
         data-kt-drawer-width="{default:'200px', '300px': '250px'}"
         data-kt-drawer-direction="start"
         data-kt-drawer-toggle="#kt_aside_mobile_toggle"
    >
        <!--begin::Brand-->
        <div class="aside-logo flex-column-auto" id="kt_aside_logo">
            <!--begin::Logo-->
            <a href="#" v-if="asideTheme === 'dark'">
                <img alt="Logo" :src="darkLogo" class="h-35px logo"/>
            </a>
            <a href="#" v-if="asideTheme === 'light'">
                <img alt="Logo" :src="lightLogo" class="h-35px logo"/>
            </a>
            <!--end::Logo-->

            <!--begin::Aside toggler-->
            <div id="kt_aside_toggle"
                 class="btn btn-icon w-auto px-0 btn-active-color-primary aside-toggle"
                 data-kt-toggle="true"
                 data-kt-toggle-state="active"
                 data-kt-toggle-target="body"
                 data-kt-toggle-name="aside-minimize">
                <span class="svg-icon svg-icon-1 rotate-180">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path opacity="0.5" d="M9.63433 11.4343L5.45001 7.25C5.0358 6.83579 5.0358 6.16421 5.45001 5.75C5.86423 5.33579 6.5358 5.33579 6.95001 5.75L12.4929 11.2929C12.8834 11.6834 12.8834 12.3166 12.4929 12.7071L6.95001 18.25C6.5358 18.6642 5.86423 18.6642 5.45001 18.25C5.0358 17.8358 5.0358 17.1642 5.45001 16.75L9.63433 12.5657C9.94675 12.2533 9.94675 11.7467 9.63433 11.4343Z" fill="black"/>
                        <path d="M15.6343 11.4343L11.45 7.25C11.0358 6.83579 11.0358 6.16421 11.45 5.75C11.8642 5.33579 12.5358 5.33579 12.95 5.75L18.4929 11.2929C18.8834 11.6834 18.8834 12.3166 18.4929 12.7071L12.95 18.25C12.5358 18.6642 11.8642 18.6642 11.45 18.25C11.0358 17.8358 11.0358 17.1642 11.45 16.75L15.6343 12.5657C15.9467 12.2533 15.9467 11.7467 15.6343 11.4343Z" fill="black"/>
                    </svg>
                </span>
            </div>
            <!--end::Aside toggler-->
        </div>
        <!--end::Brand-->

        <!--begin::Aside menu-->
        <div class="aside-menu flex-column-fluid">
            <Menu></Menu>
        </div>
        <!--end::Aside menu-->
    </div>
    <!--end::Aside-->
</template>

<script>
    import Menu from "./Menu";
    export default {
        name: "Aside",
        components: {Menu},
        computed: {
            asideTheme() {
                return this.$store.getters["lab/config"]("aside.theme")
            },
            darkLogo() {
                return this.$store.getters["lab/config"]("main.logo.dark")
            },
            lightLogo() {
                return this.$store.getters["lab/config"]("main.logo.light")
            }
        }
    }
</script>

<style scoped>

</style>